<template>
  <div>
    <el-card class="box-card">
      <div class="top">
        <el-button type="success" @click="$router.push({ path: 'new' })">新增试题</el-button>
      </div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科" prop="subjectID">
              <el-select @change="changeSubject" v-model="form.subjectID" placeholder="请选择">
                <el-option
                  v-for="item in subject"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" prop="catalogID">
              <el-select v-model="form.catalogID" placeholder="请选择">
                <el-option
                  v-for="item in catalogue"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" prop="tags">
              <el-select v-model="form.tags" placeholder="请选择">
                <el-option
                  v-for="item in tagOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" prop="keyword">
              <el-input v-model="form.keyword"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题类型" prop="questionType">
              <el-select v-model="form.questionType" placeholder="请选择">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in questionType"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" prop="difficulty">
              <el-select v-model="form.difficulty" placeholder="请选择">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in difficulty"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" prop="direction">
              <el-select v-model="form.direction" placeholder="请选择">
                <el-option
                  :label="item"
                  :value="index"
                  v-for="(item , index) in direction"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" prop="creatorID">
              <el-select v-model="form.creatorID" placeholder="请选择">
                <el-option
                  :label="item.username"
                  :value="item.id"
                  v-for="item in userPeople"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="题目备注" prop="remarks">
              <el-input v-model="form.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" prop="shortName">
              <el-input v-model="form.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="display:flex">
            <el-form-item label="城市" prop="province">
              <el-select
                style="width:50%"
                v-model="form.province"
                placeholder="请选择"
                @change="handleCity"
              >
                <el-option
                  :label="item"
                  :value="item"
                  v-for="(item,index) in everyCity"
                  :key="index"
                ></el-option>
              </el-select>
              <el-select style="width:50%" v-model="form.city" placeholder="请选择">
                <el-option
                  :label="item"
                  :value="item"
                  v-for="(item,index) in correspondingToCity"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="text-align:right">
              <el-button @click="clear()">清除</el-button>
              <el-button @click="filter()" type="primary">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-alert :title="`数据一共${this.num}条`" type="info" effect="dark"></el-alert>
      <el-table :data="questions">
        <el-table-column label="试题编号" prop="number" width="120px"></el-table-column>
        <el-table-column label="学科" prop="subject"></el-table-column>
        <el-table-column label="目录" prop="catalog"></el-table-column>
        <el-table-column label="题型">
          <template slot-scope="scope">
            <el-button
              class="color"
              type="text"
              size="small"
            >{{questionType.find(item=>item.value===+scope.row.questionType).label}}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="题干" width="280px">
          <template slot-scope="scope">
            <!-- <p @click="btn(scope)"></p> -->
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="180">
          <template slot-scope="scope">{{scope.row.addDate | parseTimeByString}}</template>
        </el-table-column>
        <el-table-column label="难度">
          <template
            slot-scope="scope"
          >{{difficulty.find(item=>item.value===+scope.row.difficulty).label}}</template>
        </el-table-column>
        <el-table-column label="录入人" prop="creator"></el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <el-button
              plain
              type="primary"
              size="small"
              circle
              icon="el-icon-view"
              title="预览"
              @click="openPreviewDialog(scope.row)"
            ></el-button>
            <el-button
              plain
              type="success"
              size="small"
              circle
              icon="el-icon-edit"
              title="修改"
              @click="$router.push(`new?id=${scope.row.id}`)"
            ></el-button>
            <el-button
              plain
              type="danger"
              size="small"
              circle
              icon="el-icon-delete"
              title="删除"
              @click="delQuestion(scope.row)"
            ></el-button>
            <el-button
              plain
              type="warning"
              size="small"
              circle
              icon="el-icon-check"
              @click="addChoice(scope.row)"
              title="加入精选"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="float:right"
        @size-change="handleSizeChange"
        background
        :pager-count="5"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-sizes="[3,5, 10, 20,]"
        :page-size="5"
        layout="  prev, pager,  next,sizes, jumper"
        :total="num"
      ></el-pagination>
      <QuestionsPreview ref="questionPreview" :data="questionInfo"></QuestionsPreview>
    </el-card>
  </div>
</template>

<script>
// 基本数据
import { list as questionBankList, remove as Del, choiceAdd } from '../../api/hmmm/questions'
// 学科
import { simple } from '../../api/hmmm/subjects.js'
import { difficulty, questionType, direction } from '../../api/hmmm/constants.js'
// 目录
import { simple as directoryList } from '../../api/hmmm/directorys.js'
// 标签
import { simple as tagLists } from '../../api/hmmm/tags.js'
// 预览组件
import QuestionsPreview from '../components/questions-preview.vue'
// 录入人
import { simple as user } from '../../api/base/users.js'
// 城市
import { provinces as everyCity, citys as correspondingToCity } from '@/api/hmmm/citys'
// 过滤器
// import { parseTimeByString } from '@/api/filters'
export default {
  name: 'questions',
  props: {},
  components: {
    QuestionsPreview
  },
  data () {
    return {
      // 所有城市
      everyCity: everyCity(),
      // 对应地区
      correspondingToCity: [],
      // 分页自带data
      currentPage4: 4,
      // 给预览页面的数据
      questionInfo: {},
      form: {
        subjectID: '',
        difficulty: '',
        questionType: '',
        tags: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: '',
        catalogID: '',
        page: 1,
        pagesize: 10
      },
      // 试题类型
      questionType,
      // 难度
      difficulty,
      // 方向
      direction,
      // 数据
      questions: [],
      // 学科
      subject: [],
      // 数据条数
      num: 0,
      // 二级
      catalogue: [],
      // 标签
      tagOptions: [],
      // 录入人员
      userPeople: []
    }
  },
  computed: {},
  watch: {},
  async created () {
    // 学科
    // 学科下拉选项
    const { data: subjectArr } = await simple()
    // console.log('11222')
    // console.log(subjectArr)
    this.subject = subjectArr
    this.list()
    const data = await user()
    // console.log('使用者')
    // console.log(data.data)
    // const uname = data.data
    // const unames = uname.map(item => { item.username })
    // console.log(unames)
    this.userPeople = data.data
  },
  mounted () {},
  methods: {
    // btn (a) {
    //   console.log(a)
    // },
    async changeSubject (subjectID) {
      if (subjectID) {
        // 获取目录
        const { data: directoryArr } = await directoryList({ subjectID })
        this.catalogue = directoryArr
        // 标签下拉选项
        const { data } = await tagLists({ subjectID })
        this.tagOptions = data.tagArr
      } else {
        this.catalogue = []
        this.tagOptions = []
      }
    },
    handleClick (row) {
      console.log(row)
    },
    filter () {
      this.list()
    },
    // 获取列表
    async list () {
      const data = await questionBankList(this.form)
      console.log()
      this.questions = data.data.items
      // console.log('1111xxxxxx')
      // console.log(data)
      console.log(this.questions)
      // 数据条数
      this.num = data.data.counts
    },
    // 删除
    async delQuestion (question) {
      // console.log(question)
      await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await Del(question)
      this.$message.success('删除成功')
      this.list()
    },
    // 打开预览框
    openPreviewDialog (row) {
      // console.log('预览数据')
      // console.log(row)
      this.questionInfo = row
      // console.log('22333')
      console.log(this.questionInfo)
      this.$nextTick(() => {
        this.$refs.questionPreview.open()
      })
    },
    // 清空表单
    clear () {
      // 不能把page和pagesize重置成空字符串
      for (const item in this.form) {
        if (item !== 'page' && item !== 'pagesize') { this.form[item] = '' }
      }
      // bug
      // this.$refs.form.resetFields()
    },
    // 加入精选
    async addChoice (items) {
      // console.log('精选')
      // console.log(question)
      await this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
      })

      await choiceAdd({ id: items.id, choiceState: 1 })
      this.$message({
        message: '加入成功!'
      })
      this.list()
    },
    // 分页
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      // Bug报错
      // this.form.pagesize = val
      // console.log(this.from.pagesize)
      // 更新下列表
      this.list()
    },
    handleCurrentChange (val) {
      this.form.page = val
      // console.log(this.form.page)
      // console.log(`当前页: ${val}`)
      this.list(this.form)
    },
    // 城市发生变化找对应地区
    handleCity (item) {
      console.log(item)
      this.form.city = null
      this.correspondingToCity = correspondingToCity(item)
    }
  }

}
</script>

<style lang="scss" scoped>
.top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}
.color {
  color: black;
}
</style>
